<template>
	<view>
		<navBar :title="title" />
		<image :src="img" style="width: 100%;height: 300rpx;" :lazy-load="true"></image>
		<view class="tabsBox">
			<u-tabs :list="list" :current="current" active-color="#ff9900" :show-bar="false" @change="change"></u-tabs>
			<u-tabs :list="list2" :font-size="26" active-color="#ff9900" :current="childrenCur" :show-bar="false" @change="childrenChange">
			</u-tabs>
		</view>
		<view class="product" :style="{'backgroundColor':backgroundColor}">
			<u-waterfall v-model="productList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-water" @click="toDetails(item)" v-for="(item, index) in leftList"
						:key="index">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<u-lazy-load :image="item.mainImageUrl" threshold="50" border-radius="10"></u-lazy-load>
						<view class="demo-title">
							<u-tag v-if="item.text" class="u-m-r-10" :text="item.text" type="warning" mode="dark"
								size="mini" />
							{{item.productTitle}}
						</view>
						<view class="demo-shop">
							<text class="u-type-warning u-font-xl u-m-r-10">¥{{item.salePrice}}</text>
							<text class="" style="text-decoration: line-through;">¥{{item.productSalePrice}}</text>
						</view>
						<view class="u-flex u-row-between u-font-xs u-p-t-10">
							<text class="u-type-info">{{item.payNum}}人付款</text>
							<text class="u-type-warning">+{{item.productSalePrice}}贡献值</text>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-water" @click="toDetails(item)" v-for="(item, index) in rightList"
						:key="index">
						<u-lazy-load :image="item.mainImageUrl" threshold="50" border-radius="10"></u-lazy-load>
						<view class="demo-title">
							<u-tag v-if="item.text" class="u-m-r-10" :text="item.text" type="warning" mode="dark"
								size="mini" />
							{{item.productTitle}}
						</view>
						<view class="demo-shop">
							<text class="u-type-warning u-font-xl u-m-r-10">¥{{item.salePrice}}</text>
							<text class="" style="text-decoration: line-through;">¥{{item.productSalePrice}}</text>
						</view>
						<view class="u-flex u-row-between u-font-xs u-p-t-10">
							<text class="u-type-info">{{item.payNum}}人付款</text>
							<text class="u-type-warning">+{{item.productSalePrice}}贡献值</text>
						</view>
					</view>
				</template>
			</u-waterfall>
			<view class="u-p-30">
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index.vue'
	export default {
		data() {
			return {
				img:require('@/static/departmentStore/BJ.png'),
				title: '百货服饰',
				defaultId:"",
				defaultSecId:"",
				current: 0,
				childrenCur: 0,
				list: [],
				list2: [],
				
				backgroundColor: {
					type: String,
					default: '#f2f2f2'
				},
				productList: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '暂无数据'
				},
				dataFrom: {
					category_id: '',
					query_type: '',
					sort_type:'',
					page: 1,
					size: 10
				}
			}
		},
		components: {
			navBar
		},
		onLoad() {
			this.getDepartment();
		},
		methods: {
			change(index){
				this.current = index;
				this.defaultId = this.list[index].id;
				this.$refs.uWaterfall.clear();
				this.secCategories();
			},
			childrenChange(index){
				this.$refs.uWaterfall.clear();
				this.childrenCur = index;
				this.dataFrom.category_id = this.list2[index].id;
				this.productQuery();
			},
			productQuery() {
				this.$u.api.queryMall(this.dataFrom).then(res => {
					if (res.code == 0) {
						this.productList = [...this.productList, ...res.data];
						if (res.data.length<10) {
							this.status = 'nomore';
						}
					}
				})
			},
			getDepartment(){
				this.$u.api.department().then(res=>{
					if(res.code==0){
						this.list = res.data;
						this.defaultId = this.list[0].id;
						this.secCategories();
					}
				})
			},
			secCategories() {
				this.$u.api.categories({
					parentId: this.defaultId
				}).then(res => {
					if (res.code == 0) {
						this.list2 = res.data;
						this.dataFrom.category_id = this.list2[0].id;
						this.productQuery();
					}
				})
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/mallDetails/index?id=' + item.id
				})
			},
		}
	}
</script>

<style scoped>
	.tabsBox {
		box-shadow: 2rpx 2rpx 20rpx #f2f2f2;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-top: 16rpx;
		margin-top: -20rpx;
		background: #ffffff;
		z-index: 100;
		position: relative;
	}
	.demo-water {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		position: relative;
		padding: 16rpx;
		box-shadow: 1px 1px 1px #f2f2f2;
	}
	
	.demo-title {
		box-sizing: border-box;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		color: #1a1a1a;
		margin-top: 10rpx;
		margin-bottom: 6rpx;
		padding: 0 8rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: #FF6801;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: #ccc;
		margin-top: 5px;
	}
</style>
